<template>
    <div>
      <table class="table table-bordered">
        <tbody>
            <tr>
                <td>菜谱标题</td>
                <td><input type="text" v-model="data.sname"></td>
            </tr>
              <tr>
                <td>菜谱封面</td>
                <td><input type="file" @change="img">
                <img :src="data.tu" width="100px" height="100px" v-show="showimg"></td>
            </tr>
              <tr>
                <td>菜谱标签</td>
                <td><select v-model="data.bid">
                    <option value="">请选择</option>
                    <option :value="o.bid" v-for="o in pa" :key="o.bid">{{ o.bname }}</option>
                </select></td>
            </tr>
              <tr>
                <td>分类</td>
                <td><select v-model="data.cid">
                    <option value="">请选择</option>
                    <option :value="o.cid" v-for="o in sa" :key="o.cid">{{ o.cname }}</option>
                </select></td>
            </tr>
              <tr>
                <td>状态</td>
                <td><input type="radio" :value="1" v-model="data.flag">已发布
                <input type="radio" :value="0" v-model="data.flag">未发布</td>
            </tr>
              <tr>
                <td>发布时间</td>
                <td><input type="date" v-model="data.date"></td>
            </tr>
              <tr>
                <td>菜谱详情</td>
                <td><textarea v-model="data.xq"></textarea></td>
            </tr>
              <tr>
                <td></td>
                <td><input type="button" value="新增" @click="add()"></td>
            </tr>
        </tbody>
      </table>
    </div>
</template>

<script setup lang="ts">
import moment from 'moment';
import axios from 'axios';
import { onMounted, ref} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import router from '@/router';
let showimg:any = ref(false)
let pa:any = ref({})
let sa:any = ref({})
let data:any = ref({
  "sname":"",
  "tu": "",
  "bid": '',
  "cid": '',
  "date": "",
  "flag": 1,
  "xq": ""
})
const img=(e:any)=>{
    let l = e.target.files[0]
    let r = new FormData()
    r.append("file",l)
    axios({
        url:'https://localhost:7265/api/Shi/Tu',
        method:"post",
        data:r
    })
    .then(res=>{
        data.value.tu = res.data
        showimg.value = true
    })
}
onMounted(()=>{
    show()
    lie()
})
const show=()=>{
    axios({
        url:'https://localhost:7265/api/Shi/Biaos',
        method:"get"
    })
    .then(res=>{
        pa.value = res.data
    })
}
const lie=()=>{
    axios({
        url:'https://localhost:7265/api/Shi/Cais',
        method:"get"
    })
    .then(res=>{
        sa.value = res.data
    })
}
const add=()=>{
    if(data.value.sname=="")
    {
        alert("菜谱标题不能为空")
        return;
    }
    if(data.value.tu=="")
    {
        alert("菜谱封面不能为空")
        return;
    }
    if(data.value.bid=="")
    {
        alert("标签不能为空")
        return;
    }
     if(data.value.cid=="")
    {
        alert("分类不能为空")
        return;
    } 
    if(data.value.xq=="")
    {
        alert("菜谱详情不能为空")
        return;
    }
    axios({
        url:"https://localhost:7265/api/Shi/Add",
        method:'post',
        data:data.value
    })
    .then(res=>{
        if(res.data>0)
        {
            alert('新增成功')
            router.push("/demo2")
        }
        else
        {
            alert("新增失败")
            return
        }
    })
}
</script>

<style scoped>

</style>